import { View, Text, ScrollView,Swiper, SwiperItem, Image} from '@tarojs/components'
import Taro,{ useLoad } from '@tarojs/taro'
import './index.scss'
import type { MerchantType } from '../../../types/userData'
import mockMerchants from '@/mock/mockMerchants'
import { AtIcon } from 'taro-ui'
export default function MerchantDetail () {
  const router = Taro.getCurrentInstance().router as any
  const id = router.params.id
  console.log('id:',id)
  if(!id){
    Taro.showModal({
      title: '提示',
      content: '参数错误',
      showCancel: false
    }).then(() => {
      Taro.navigateBack()
    })
  }
  const merchant = mockMerchants.find(item => item.id === id) as MerchantType
  if(!merchant){
    Taro.showModal({
      title: '提示',
      content: '商家不存在',
      showCancel: false
    }).then(() => {
      Taro.navigateBack()
    })
  }

  return (
    <View className='merchantDetail'>
      <ScrollView scrollY>
        <View className='header'>
          {
            merchant.gallery.length > 0 && (
              <Swiper className='swiper' circular autoplay indicatorDots>
                {
                  merchant.gallery.map(item => (
                    <SwiperItem key={item}>
                      <Image className='swiper-img' src={item} mode='aspectFill'/>
                    </SwiperItem>
                  ))
                }
              </Swiper>
            )
          }
          
        </View>
        <View className='bodyer'>
          <View className='info'>
            <View className='name'>{ merchant.name }</View>
            <View className='radio'>
              <Text className='label'>兑换比例</Text>
              <Text className='value'>{ merchant.ratio }</Text>
            </View>
            <View className='address'>
              <AtIcon value="map-pin" size={8} color='#999' className='icon'></AtIcon>
              <Text className='label'>{ merchant.location}</Text>
            </View>
          </View>
          <View className='description'>
            <View className="label">商家介绍</View>
            <View className="value">{merchant.description}</View>
            <View className="label">营业时间</View>
            <View className="value">{merchant.openingHours}</View>
            <View className="label">联系电话</View>
            <View className="value">{merchant.phoneNumber}</View>
            <View className="label">优惠活动</View>
            <View className="value">
              {merchant.promotions.map(prom=>{
                return (
                  <View className="promotion">
                    <AtIcon value="heart" size={8} color='#E83B2F' className='prom-icon'></AtIcon>
                    <View className="prom-title">{prom}</View>
                  </View>
                )
              })}
            </View>
            <View className="label">推荐商品</View>
            <View className="value">
              <View className='recommend'>
                {
                  merchant.redeemableItems.map(redeem=>{
                    return (
                      <View className='redeem-item'>
                        <View className='redeem-img'>
                          <Image className='img' src={redeem.image} mode='aspectFill'></Image>
                        </View>
                        <View className='redeem-name'>
                          <Text className='name'>{redeem.name}</Text>
                        </View>
                        <View className='redeem-points'>
                          <Text className='points'>{redeem.points}积分</Text>
                        </View>
                      </View>
                    )
                  })
                }
              </View>
              
            </View>
          </View>
          <View className='footer'>
            <View className='footer-btn'>加入会员</View>
          </View>

        </View>
      </ScrollView>
    </View>
  )
}
